<template>
	<view class="all">
		<view class="one" v-for="(item,index) of templateList" :key="index" v-if="dataCode == 0" @click="chooseThisT(item)">
			<view class="one_tip_title">
				<text class="one_tip" v-if="item.isDefault">默认</text>
				<text class="one_title">{{item.name}}</text>
			</view>
			<view class="place_start_end">
				<view class="person_all">{{type==0?'座位数：':''}}{{item.quantity}}人</view>
				<view class="place_start_end_one">
					<text class="place_start_end_one_dot"></text>
					<text class="place_start_end_one_place">{{item.departurePlace}}</text>
				</view>
				<view class="place_start_end_one">
					<text class="place_start_end_one_dot_"></text>
					<text class="place_start_end_one_place">{{item.destination}}</text>
				</view>
			</view>
			<view class="route_" v-if="type == 0 && item.pass != null && item.pass != ''">
				<text class="route_word">途经：{{item.pass}}</text>
			</view>
			<view class="route" v-if="item.remark != '' && item.remark != null">
				<text class="route_word">备注：{{item.remark}}</text>
			</view>
		</view>
		<none-data v-if="dataCode != 0"></none-data>
		<view class="add_one">
			<text class="add_one_btn" @click="addOne()">添加新模板</text>
		</view>
	</view>
</template>

<script>
	import {myTemplate} from '@/Service/homeService.js';
	import noneData from '@/components/none-data.vue';
	export default {
		components:{noneData},
		data() {
			return {
				type:'',//0车找人,1人找车
				templateList:[],
				dataCode:0,
			}
		},
		onLoad(option) {
			this.type = option.type
			let pageName = (option.type == 0 ? '车找人模板':'人找车模板')
			uni.setNavigationBarTitle({
			　　title:pageName
			})
		},
		onShow() {
			this.getMyTemplate()
		},
		methods: {
			//获取我的模板数据
			getMyTemplate(){
				let carpoolType = this.type
				myTemplate(carpoolType).then((ret) => {
					this.dataCode = ret.code
					if(ret.code == 0){
						this.templateList = ret.data
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			//选择当前模板
			chooseThisT(item){
				this.$store.dispatch('template',item)
				uni.navigateBack({
					delta:1
				})
			},
			//添加新模板
			addOne(){
				console.log("添加新模板")
				uni.navigateTo({
					url:'/pages/releasePage/setTemplate/setTemplate?type=' + this.type
				})
			}
		}
	}
</script>

<style>
	page{
		font-family: Source Han Sans CN;
		background-color: #F8F8F8;
	}
	.all{
		padding: 20upx 30upx;
		
	}
	.one{
		background-color: #FFFFFF;
		border-radius: 20upx;
		padding: 0 25upx 25upx 25upx;
		margin-bottom: 20upx;
	}
	.one_tip_title{
		height: 58upx;
		border-bottom: 2upx solid #F8F8F8;
		display: flex;
		align-items: center;
	}
	.one_tip{
		display: block;
		width: 60upx;
		height: 32upx;
		background-color: #F4F8FF;
		border-radius: 8upx;
		text-align: center;
		line-height: 32upx;
		font-size: 20upx;
		color: #4687FF;
	}
	.one_title{
		display: block;
		font-size: 26upx;
		color: #333333;
		margin-left: 14upx;
	}
	.place_start_end{
		min-height: 140upx;
		position: relative;
		border-bottom: 2upx solid #F8F8F8;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 0 15upx;
	}
	.person_all{
		position: absolute;
		top:0;
		right: 0;
		font-size: 26upx;
		color: #999999;
	}
	.place_start_end_one{
		display: flex;
		align-items: center;
	}
	.place_start_end_one_dot{
		display: block;
		width: 14upx;
		height: 14upx;
		background-color: #60C68A;
		border-radius: 50%;
	}
	.place_start_end_one_dot_{
		display: block;
		width: 14upx;
		height: 14upx;
		background-color: #F3AD46;
		border-radius: 50%;
	}
	.place_start_end_one_place{
		display: block;
		font-size: 26upx;
		color: #333333;
		margin-left: 25upx;
		width: 500upx;
	}
	
	.route{
		display: flex;
		align-items: center;
		padding: 0 10upx;
		margin-top: 25upx;
	}
	.route_{
		display: flex;
		align-items: center;
		padding: 0 10upx;
		margin-top: 20upx;
	}
	.route_word{
		width: 580upx;
		font-size: 26upx;
		color: #333333;
		line-height: 38upx;
	}
	
	
	.add_one{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200upx;
	}
	.add_one_btn{
		display: block;
		width: 600upx;
		height: 88upx;
		background-color: #4687FF;
		border-radius: 44upx;
		text-align: center;
		line-height: 88upx;
		font-size: 30upx;
		color: #FFFFFF;
	}
</style>
